<template>
  <div>
    <div class="cation-info">
      <span class="cation-user-info" v-if="info.cation_type == 1">认证主体：{{info.name}}</span>
      <span class="cation-user-info"  v-if="info.cation_type == 2">认证主体：{{info.company_name}}</span>
      <span class="cation-user-info" v-if="info.cation_type == 3">认证主体：{{info.organize_name}}</span>
      <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/3400956073428cbc255914a9cb79d17.png" class="cation-logos">
      <span class="cation-type-boxs">
        <span class="cation-type-logo">
          <i class="el-icon-check"></i>
        </span>
        <span v-if="info.cation_type == 1" class="cation-type-msg">个人认证</span>
        <span v-if="info.cation_type == 2" class="cation-type-msg">企业认证</span>
        <span v-if="info.cation_type == 3" class="cation-type-msg">组织认证</span>
      </span>
      <span class="cation-time">到期时间：{{info.start_time}} 至 {{info.expire_time}}</span>
    </div>
    <div class="cation-memo">
      <div class="cation-memo-list">认证后你可以活动以下权益</div>
      <div class="cation-memo-list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item,key) in cation_memo">
            <el-card class="cation-memo-item" shadow="never">
              <div class="cation-memo-icon" :style="'background-position:'+item.bg"></div>
              <div class="cation-memo-msg">
                <p>{{item.name}}</p>
                <p>{{item.msg1}}</p>
                <p>{{item.msg2}}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props : {info:{}},
  data() {
    return {
      cation_memo: [
        {
          name: "提升公信力",
          msg1: "主办方实名认证",
          msg2: "活动更加真实可信",
          bg: "0 0"
        },
        {
          name: "加V标识",
          msg1: "标识突出醒目",
          msg2: "店铺更加权威可信",
          bg: "-104px 0px"
        },
        {
          name: "提现绿色通道",
          msg1: "可随时申请提现",
          msg2: "资金安全有保障",
          bg: "-209px -95px"
        }
      ]
    };
  },
  mounted(){
    console.log(this.info);
  },
  methods: {
  }
};
</script>

<style>
.cation-time{
  float: right;
  margin-right: 20px;
  color: #fff;
}
.cation-logos{
  height: 20px;
  vertical-align: middle;
  margin: 0 5px;
}
.cation-user-info{color: #fff;margin-left: 100px;font-size: 16px;}
.cation-type-msg{margin-left: 5px;}
.cation-type-logo{
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
  color: #feab3c
}

.cation-type-boxs{
  display: inline-block;
  height: 20px;
  line-height: 20px;
  width: 90px;
  background: #feab3c;
  border-radius: 10px;
  color: #fff;
}
.cation-info{
  width: 100%;
  height: 101px;
  background: url('https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/real_cation-bg.jpg');
  background-size: cover;
  overflow: hidden;
  line-height: 101px;
}
.no-cation {
  overflow: hidden;
  height: 60px;
  line-height: 40px;
  border-bottom: 1px solid #f1f1f1;
}
.cation-btn {
  float: right;
}
.cation-icon {
  font-size: 30px;
  line-height: 40px;
  float: left;
  color: #f56c6c;
}
.no-cation-title {
  font-size: 24px;
  margin: 0 10px;
  color: #f56c6c;
}
.no-cation-memo {
  color: #f56c6c;
}
.cation-memo-list {
  margin-top: 20px;
  font-size: 18px;
}
.cation-memo-item {
  width: 100%;
  height: 130px;
  overflow: hidden;
  margin-bottom: 20px;
}
.cation-memo-icon {
  float: left;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: url(https://ykp-new.oss-cn-hangzhou.aliyuncs.com/rzAllIcon0905.png)
    no-repeat;
  background-position: -209px 0px;
  text-align: center;
  line-height: 76px;
  color: #fff;
  font-size: 30px;
}
.cation-memo-msg {
  height: 76px;
  width: calc(100% - 96px);
  float: left;
  margin-left: 20px;
}
.cation-memo-msg > p {
  width: 100%;
  overflow: hidden;
  font-size: 14px;
  color: #8995a5;
}
.cation-memo-msg > p:first-child {
  height: 24px;
  font-size: 18px;
  color: #233040;
}
.cation-memo-msg > p:nth-child(2) {
  margin-top: 10px;
}
.cation-memo-msg > p:last-child {
  margin-top: 5px;
}
.no-cation-img {
  display: block;
  width: 100%;
}
.no-cation-li {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  color: #65717f;
}
.cation-memo-msgs {
  font-weight: bold;
  margin-bottom: 10px;
}
.cation-memo-msgs-list {
  list-style: disc;
  padding-left: 20px;
  color: #65717f;
}
.cation-memo-msgs-list > li {
  line-height: 26px;
}
</style>